<script setup>
  import { ref, reactive } from 'vue'
  import instance from '../js/axios'
  import {useRouter} from 'vue-router'

  const router = useRouter()
  let usernameMsg = ref('')
  let userPwdMsg = ref('')
  let reUserPwd = ref('')
  let reUserPwdMsg = ref('')
  let registUser = reactive({
    username:'',
    userpwd:''
  })

  /**
  * 校验注册用户名格式
  */
  async function checkUsername(){
    let usernameReg = /^[a-zA-Z0-9]{5,10}$/
    if(!usernameReg.test(registUser.username)){
      usernameMsg.value = '格式有误！'
      return false
    }

    // 继续校验用户名是否被占用
    let response = await instance.post(`user/checkUserNameUsed?username=${registUser.username}`)
    console.log(response)
    usernameMsg.value = response.data.message


    // let response = null;
    // let promise = instance.post(`user/checkUserNameUsed?username=${registUser.username}`)
    // promise.then(
    //   function(data){
    //     console.log(data)
    //     response = data
    //     usernameMsg.value = response.data.message
    //     if('1001' === response.data.code){
    //       return false
    //     }
    //   }
    // ).catch(
    //   function(error) {
    //     console.log(error)
    //   }
    // )


    if('1001' === response.data.code){
      return false
    }
    return true
  }

  /**
  * 校验注册密码格式
  */
  function checkUserPwd() {
  let userPwdReg = /^[0-9]{6}$/
  if(!userPwdReg.test(registUser.userpwd)){
    userPwdMsg.value = '格式有误！'
    return false
  }
  userPwdMsg.value = 'OK!'
  return true
  }

  /**
  * 校验注册密码确认密码
  */
  function checkReUserPwd() {
  let userPwdReg = /^[0-9]{6}$/
  if(!userPwdReg.test(reUserPwd.value)){
    reUserPwdMsg.value = '格式有误！'
    return false
  }

  if(reUserPwd.value != registUser.userpwd){
    reUserPwdMsg.value = '两次密码不一致！'
    return false
  }
  
  reUserPwdMsg.value = 'OK!'
  return true
  }

  /**
  * 注册方法
  */
  async function register() {
    // 注册时校验表单项是否都满足要求
    let flag1 = await checkUsername()
    let flag2 = checkUserPwd()
    let flag3 = checkReUserPwd()
    if(!(flag1 && flag2 && flag3)) {
      alert('表单格式有误')
      return
    }

    let {data} = await instance.post("user/register", registUser)
    console.log(data)
    if(data.code === '1000') {
      alert('注册成功，快去登录吧！')
      router.push('/login')
    }else {
      alert('抱歉，用户名被抢注了，请重新注册！')
    }
  }

</script>
<template>
 <div>
  <h3 class="ht">请注册</h3>
  <table class="tab" cellspacing="0px">
    <tr class="ltr">
      <td>请输入账号</td>
      <td>
        <input class="ipt"
         id="usernameInput"
         type="text"
         name="username"
         v-model="registUser.username"
         @blur="checkUsername()">
        <span id="usernameMsg" class="msg" v-text="usernameMsg"></span>
      </td>
    </tr>
    <tr class="ltr">
      <td>请输入密码</td>
      <td>
        <input class="ipt"
        id="userPwdInput"
        type="password"
        name="userpwd"
        v-model="registUser.userpwd"
        @blur="checkUserPwd()">
        <span id="userPwdMsg" class="msg" v-text="userPwdMsg"></span>
      </td>
    </tr>
    <tr class="ltr">
      <td>确认密码</td>
      <td>
        <input class="ipt"
        id="reUserPwdInput"
        type="password"
        v-model="reUserPwd"
        @blur="checkReUserPwd()">
 <span id="reUserPwdMsg" class="msg" v-text="reUserPwdMsg"></span>
      </td>
    </tr>
    <tr class="ltr">
      <td colspan="2" class="buttonContainer">
        <input class="btn1" type="button" @click="register()" value="注册">
        <input class="btn1" type="button" value="重置">
        <router-link to="/login">
         <button class="btn1">去登录</button>
        </router-link>
      </td>
    </tr>
  </table>
 </div>
</template>
<style scoped>
    .ht{
      text-align: center;
      color: cadetblue;
      font-family: 幼圆;
    }
    .tab{
      width: 500px;
      border: 5px solid cadetblue;
      margin: 0px auto;
      border-radius: 5px;
      font-family: 幼圆;
    }
    .ltr td{
      border: 1px solid powderblue;
    }
    .ipt{
      border: 0px;
      width: 50%;
    }
    .btn1{
      border: 2px solid powderblue;
      border-radius: 4px;
      width:60px;
      background-color: antiSuewhite;
    }
    .msg {
      color: gold;
    }
    .buttonContainer{
      text-align: center;
    }
</style>